<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理</title>
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=315"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body table-tool-mini full-table">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">类 型：</label>
                        <div class="layui-input-inline mr0">
                            <select name="name">
                                <option value="">请选择类型</option>
                                <option value="0">未缴费</option>
                                <option value="1">已缴费</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="padding-right: 110px;">
                        <button class="layui-btn icon-btn" lay-filter="formSubSearchBook" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </div>

            <table class="layui-table" id="tableBook" lay-filter="tableBook"></table>
        </div>
    </div>
</div>
<script type="text/html" id="tableBarBook">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">确认缴费</a>
</script>
<script type="text/html" id="building_2">
    <input type="checkbox" lay-filter="ckStateUser" value="{{d.status}}" lay-skin="switch" disabled
           lay-text="已缴费|未缴费" {{d.status==1?'checked':''}}/>
</script>
<script type="text/html" id="templet2">
    {{d.user.username}}
</script>
<script type="text/html" id="templet1">
    {{d.payment.name}}
</script>
<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=315"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin', 'tableX'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var tableX = layui.tableX;

        // 渲染表格
        var insTb = table.render({
            elem: '#tableBook',
            url: '/api/getAllPaymentDetails',
            page: true,
            height: "full-100",
            toolbar: true,
            cellMinWidth: 100,
            cols: [
                [
                    {field: 'id', title: 'id'}
                    ,{field: 'payment', sort: true, templet: '#templet1', title: '缴费名'}
                    ,{field: 'user', sort: true, templet: '#templet2', title: '用户名'}
                    ,{field: 'value', sort: true, title: '缴费值'}
                    ,{field: 'time', sort: true, templet: function (d) {
                        return util.toDateString(d.time);
                    },title: '缴费时间'}
                    ,{field: 'status', sort: true, templet: '#building_2', title: '状态'}
                    ,{align: 'center', toolbar: '#tableBarBook', title: '操作', minWidth: 200}
                ]
            ]
        });

        // 搜索
        form.on('submit(formSubSearchBook)', function (data) {
            insTb.reload({where: data.field,url:'/api/findPaymentDetail',page : {curr : 1}}, 'data');
        });

        table.on('tool(tableBook)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
                layer.confirm('确定要缴费吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    layer.load(2);
                    $.get('/api/jiaofei', {
                        id: data.id
                    }, function (res) {
                        layer.closeAll('loading');
                        if (res.code == 200) {
                            layer.msg(res.msg, {icon: 1});
                            insTb.reload({}, 'data');
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'json');
                });
            }
        });
    });
</script>

</body>
</html>